<template>
  <div class="app-container">

    <el-card>
      <el-row style="display:inline-flex;padding: 20px 0" :gutter="20">
        <el-col>
          <el-button v-permission="`post:/sys/menu/add`" type="primary" icon="el-icon-plus" plain @click.native.prevent="openAdd(null)">
            添加
          </el-button>
        </el-col>

        <el-col>
          <el-button v-permission="`post:/sys/menu/delete`" type="danger" icon="el-icon-delete" :disabled="selection.length===0" plain @click.native.prevent="handleDelte()">
            删除
          </el-button>
        </el-col>

        <el-col>
          <el-button v-permission="`post:/sys/menu/edite`" type="success" icon="el-icon-delete" :disabled="selection.length!==1" plain @click.native.prevent="openEdite()">
            编辑
          </el-button>
        </el-col>
      </el-row>

      <el-row style="padding: 20px 0">
        <el-table
          v-permission="`get:/sys/menu/tree`"
          :data="menuTree"
          style="width: 100%;margin-bottom: 20px;"
          row-key="menuId"
          :tree-props="{children: 'children'}"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="name"
            label="名称"
          />
          <el-table-column
            prop="route"
            label="前端权限值"
          />

          <el-table-column
            prop="api"
            label="后端权限值"
          />

          <el-table-column
            v-slot="scope"
            label="类型"
          >
            <template>
              {{ scope.row.type === 0 ? '目录' : scope.row.type === 1 ? '菜单' : '功能' }}
            </template>
          </el-table-column>

          <el-table-column
            v-slot="scope"
            label="操作"
          >
            <template>
              <el-button
                v-if="scope.row.type!==2"
                v-permission="`post:/sys/menu/add`"
                plain
                type="text"
                icon="el-icon-edit"
                @click.native.prevent="openAdd(scope.row)"
              >添加
              </el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-row>
      <FormDialog
        ref="addDialog"
        :fields="addDialog.fields"
        :rules="addDialog.rules"
        :handle-ok="getTree"
        :submit="addDialog.submit"
        title="添加菜单"
        :add-form="addDialog.addForm"
      />

      <FormDialog
        ref="editeDialog"
        :fields="editeDialog.fields"
        :rules="editeDialog.rules"
        :handle-ok="getTree"
        :submit="editeDialog.submit"
        title="编辑菜单"
        :add-form="editeDialog.addForm"
      />
    </el-card>
  </div>
</template>

<script>
import { tree, add, del, edite } from '@/api/pp/sys/menu'
import FormDialog from '@/pp-components/FormDialog.vue'
import permission from '@/directive/permission/index.js'
export default {
  components: { FormDialog },
  directives: { permission },
  data() {
    return {
      menuTree: [],
      selection: [],
      fields: [
        { name: 'pname', label: '父级', disabled: true },
        // {name:"pid",label:"父级id",type:"hidden"},
        { name: 'name', label: '名称' },
        { name: 'route', label: '前端权限值' },
        { name: 'api', label: '后端权限值' },
        { name: 'sort', label: '排序值', type: 'number' }
      ],
      addDialog: {
        fields: [],
        submit: add,
        rules: {
          name: [{ required: true, trigger: 'blur', message: '菜单名不为空' }],
          type: [{ required: true, trigger: 'change', message: '类型不为空' }]
        },
        addForm: {}
      },
      editeDialog: {
        fields: [{ name: 'name', label: '名称' },
          { name: 'route', label: '前端权限值' },
          { name: 'menuId', type: 'hidden', label: '菜单id' },
          { name: 'api', label: '后端权限值' },
          { name: 'sort', label: '排序值', type: 'number' }],
        submit: edite,
        rules: {
          name: [{ required: true, trigger: 'blur', message: '菜单名不为空' }],
          type: [{ required: true, trigger: 'change', message: '类型不为空' }]
        },
        addForm: {}
      }
    }
  },
  mounted() {
    this.getTree()
  },
  methods: {

    handleDelte() {
      const menuIds = []
      this.selection.forEach(e => {
        menuIds.push(e.menuId)
      })

      this.$ask({ message: '确认删除？' }).then(() => {
        del(menuIds.join(',')).then(res => {
          this.$msgOk(res)
          this.getTree()
        })
      })
    },
    openEdite() {
      const row = this.selection[0]
      this.editeDialog.addForm = row
      this.$refs.editeDialog.show()
    },
    openAdd(row) {
      if (row) {
        this.addDialog.addForm['pname'] = row.name
        this.addDialog.addForm['pid'] = row.menuId
        if (row.type === 0) {
          this.addDialog.fields = [...this.fields, {
            name: 'type', label: '类型', type: 'select',
            options: [{ label: '目录', value: 0 },
              { label: '菜单', value: 1 },
              { label: '功能', value: 2, disabled: true }
            ]
          }]
        }
        if (row.type === 1) {
          this.addDialog.fields = [...this.fields, {
            name: 'type', label: '类型', type: 'select',
            options: [{ label: '目录', value: 0, disabled: true },
              { label: '菜单', value: 1, disabled: true },
              { label: '功能', value: 2 }
            ]
          }]
        }
      } else {
        this.addDialog.addForm['pname'] = '根目录'
        this.addDialog.addForm['pid'] = 0
        this.addDialog.fields = [...this.fields, {
          name: 'type', label: '类型', type: 'select',
          options: [{ label: '目录', value: 0 },
            { label: '菜单', value: 1, disabled: true },
            { label: '功能', value: 2, disabled: true }
          ]
        }]
      }
      this.$refs.addDialog.show()
    },
    handleSelectionChange(val) {
      this.selection = val
    },
    getTree() {
      tree().then(res => {
        this.menuTree = res.data
      })
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
